<template>
  <div class="order">
    <ul class="order_list">
      <li class="order" v-for="o in data" :key="o.id">
        <el-row class="order_header">
          <el-col :span="6"
            >下单时间: <strong>{{ o.orderTime | fmtDate }}</strong></el-col
          >
          <el-col :span="6">订单编号:{{ o.id }}</el-col>
          <el-col :span="8"
            >订单总额:￥<span style="color: red; font-size: 15px"
              >{{ o.total }} </span
            >/ 元
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-row class="order_lines">
              <div
                v-for="line in o.orderLines"
                :key="line.id"
                class="order_line"
              >
                <el-col :span="4">
                  <img
                    :src="line.product.photo"
                    alt=""
                    style="width: 100%; vertical-align: top"
                  />
                </el-col>
                <el-col :span="14">
                  <div class="order_desc">
                    <div><strong>商品名称：</strong> {{ line.name }}</div>
                    <!-- <div
                      style="
                        overflow: hidden;
                        　　text-overflow: ellipsis;
                        　　display: -webkit-box;
                        　　-webkit-line-clamp: 2;
                        　　-webkit-box-orient: vertical;
                      "
                    > -->
                    <div
                      style="
                        width: 100%;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                      "
                    >
                      <strong>商品介绍：</strong> {{ line.product.description }}
                    </div>
                    <div
                      style="
                        width: 100%;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                      "
                    >
                      <strong>顾客备注：</strong> {{ o.buyerMessage }}
                    </div>
                    <!-- <div>
                      <strong>超市名称：</strong> {{ o.supermarket.name }}
                    </div>
                    <div>
                      <strong>超市地址：</strong> {{ o.supermarket.address }}
                    </div> -->
                  </div>
                  <!-- <div v-if="o.orderStatus === '已完成'">
                    <div style="color: red; padding: 0.5em 0">
                      <strong>评价内容：</strong> {{ o.comment }}
                    </div>
                    <div>{{ o.commentTime | fmtDate }}</div>
                  </div> -->
                </el-col>
                <el-col :span="5">
                  <!-- {{ line }} -->
                  <ul>
                    <li>
                      商品金额：￥<span style="color: red; font-size: 15px">{{
                        line.price
                      }}</span>
                      / {{ line.product.unit }}
                    </li>
                    <li>数量：{{ line.num }}</li>
                    <li v-if="o.status !== '待支付'">
                      实付金额：￥<span style="color: red; font-size: 15px"
                        >{{ line.price * line.num }}
                      </span>
                      / 元
                    </li>
                    <li v-else>实付金额：还未支付</li>
                    <li v-if="o.orderStatus == '待派送'">
                      快递单号：<strong>{{ o.expressCode }}</strong>
                    </li>
                  </ul>
                </el-col>
              </div>
            </el-row>
          </el-col>
          <el-col :span="4" style="padding: 1em">
            <ul>
              <!-- <li>总额：<span style="color:red">￥{{o.total}}</span></li> -->
              <li style="line-height: 3em">
                <el-tag type="success" size="mini">{{ o.status }}</el-tag>
              </li>
              <li v-if="o.status == '待派送'">
                <el-button type="text" size="mini" @click="toSendout(o)"
                  >开始派送</el-button
                >
              </li>
              <!-- <li v-if="o.status == '派送中'">
                <el-button type="text" size="mini" @click="toReceiving(o)"
                  >确认收货</el-button
                >
              </li> -->
              <!-- <li v-if="o.status == '已完成'">
                <el-button type="text" size="mini" @click="toComment(o)"
                  >评价</el-button
                >
              </li> -->
              <!-- <li><el-button type="text" size="mini">立即付款</el-button></li> -->
              <li>
                <el-button type="text" size="mini" @click="toOrderDetails(o)"
                  >订单详情</el-button
                >
              </li>
            </ul>
          </el-col>
        </el-row>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import urlMixin from "@/utils/urlMixin";
export default {
  mixins: [urlMixin],
  props: ["data"],
  computed: {
    ...mapGetters(["roles"]),
  },
  methods: {
    toSendout(o) {
      this.$emit("toSendout", o);
    },
    toReceiving(o) {
      this.$emit("toReceiving", o);
    },
    toComment(o) {
      this.$emit("toComment", o);
    },
    toOrderDetails(o) {
      this.$emit("toDetails", o);
    },
  },
};
</script>

<style scoped>
.order_desc {
  padding: 0 1em;
}
.order_desc > div {
  line-height: 2em;
}

.order_list {
  font-size: 12px;
  border: 1px solid #f5f5f5;
  margin-bottom: 0.3em;
}
.order_list .order_header {
  background-color: #f5f5f5;
  line-height: 38px;
  padding: 0 1em;
}
.order_list .order_lines {
  padding: 1em;
  border-right: 1px solid #f5f5f5;
}
.order_list .order_lines .order_line::after {
  content: "";
  display: block;
  clear: both;
}
.order_list .order_lines .order_line {
  padding: 0.5em 0;
  border-bottom: 1px solid #f5f5f5;
}
.order_list .order_lines .order_line:last-child {
  border-bottom: none;
}
.order_list .order_lines li {
  line-height: 20px;
}
</style>
